<template>
	<view class="goods-detail-wrap">
		<scroll-view scroll-y class="layout-scroll">
			<view class="swiper-box" v-if="swiperList.length > 0">
				<swiper class="swiper" @change="handleChange" circular :indicator-dots="false" :autoplay="autoplay"
					:interval="2000" :duration="500">
					<swiper-item v-for="item in swiperList">
						<view class="swiper-item" v-if="item.type == 'image'">
							<image :src="item.url" mode=""></image>
						</view>
						<view class="swiper-item" v-else>
							<video :src="item.url" controls :muted="muted" id="myVideo1"
								:autoplay="videoAutoplay"></video>
						</view>
					</swiper-item>
				</swiper>
				<view class="indicator" v-if="goodsInfo.goodsBanner && currentNum == (swiperList.length - 1)">
				</view>
				<view class="indicator" v-else>
					<view class="indicator-num">{{ currentNum + 1 }}/{{ swiperList.length }}</view>
				</view>
			</view>
			<view class="swiper-box" v-else>
				<image style="width: 100%;height:100%"
					src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_nomal.png">
				</image>
			</view>
			<view class="goods-info">
				<view class="price">
					<view class="price-info">
						<view class="new-price" v-if="goodsInfo.redeemIntegral">
							{{ goodsInfo.redeemIntegral }}
							<text class="icon">积分</text>
						</view>
						<view class="old-price" v-if="goodsInfo.terPurchasePrice">
							{{ goodsInfo.terPurchasePrice.toFixed(1) }}
						</view>
					</view>
					<view class="share" @click="show=true"><u-icon name="share-square" color="#fff"
							size="36"></u-icon>分享</view>
				</view>
				<view class="goods-name">{{ goodsInfo.productName }}</view>
			</view>
			<view class="goods-info-item goods-number">
				<view class="goods-number-item">
					<text class="goods-label">商品编码</text>
					<text class="goods-title">{{goodsInfo.goodCode}}</text>
				</view>
				<view class="">
					<text class="goods-label">供应商家</text>
					<text class="goods-title">{{goodsInfo.supplierName}}</text>
				</view>
			</view>
			<view class="goods-info-item">
				<view class="title">购买数量</view>
				<view class="item-content">
					<view class="pay-count">
						<text style="color:red;margin-right: 5rpx;" v-if="goodsInfo.quota">限购{{goodsInfo.quota}}个</text>
						<uni-number-box v-if="goodsInfo.quota" v-model="number" :min="1" :max="goodsInfo.quota" />
						<uni-number-box v-else v-model="number" :min="1" />
					</view>
				</view>
			</view>
			<view class="goods-info-item" style="display: block;">
				<view class="title">规格参数</view>
				<view class="parmas-box" v-if="goodsInfo.properties">
					<view class="table-cell">
						<text class="title">品牌</text>
						<text class="info">{{ goodsInfo.brandName}}</text>
					</view>
					<view class="table-cell" v-for="(item,index) in goodsInfo.properties" :key="item.name">
						<text class="title">{{ item.name}}</text>
						<text class="info">{{ item.fieldName}}</text>
					</view>
					<view class="table-cell">
						<text class="title end-border">规格</text>
						<text class="info end-border">{{ goodsInfo.specificationModel}}</text>
					</view>
				</view>
			</view>
			<view class="goods-info-item" style="display: block;">
				<view class="title">图文详情</view>
				<view class="description">
					<view v-html="goodsInfo.rem"></view>
				</view>

			</view>
		</scroll-view>

		<view class="goods-detail-nav">
			<u-button type="primary" text="立即兑换" @click="onConfrim"></u-button>
		</view>
		<!-- 分享组件 -->
		<share :isOpen="show" @cancel="show=false" :copyBtn="false" :shareBtn="true">
		</share>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
import share from '@/components/share.vue'
	export default {
		components: {
			share
		},
		data() {
			return {
				swiperList: [],
				goodsInfo: {},
				number: 1,
				jfcode: '',
				autoplay: true,
				currentNum: 0,
				videoContext: null,
				show:false,
				wifiStatus: false, //是否是wifi环境
				muted: false, //播放静音
				videoAutoplay: false //视频自动播放
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),

		},
		mounted() {
			this.videoContext = uni.createVideoContext("myVideo1", this);
		},
		methods: {
			//wifi是否连接
			getWifiStatus() {
				let that = this
				uni.getNetworkType({
					success: function(res) {
						if (res.networkType == 'wifi') {
							that.wifiStatus = true
						} else {
							that.wifiStatus = false
						}
					}
				});
			},

			//切换
			handleChange(val) {
				this.currentNum = val.detail.current
				if (this.goodsInfo.goodsBanner && val.detail.current == (this.swiperList.length - 1)) {
					this.autoplay = false
					if (this.wifiStatus) {
						this.videoContext.play();
						this.muted = true
					}
				} else {
					this.autoplay = true
					if (this.goodsInfo.goodsBanner) {
						this.videoContext.pause();
					}
				}

			},
			//立即兑换
			onConfrim() {
				uni.navigateTo({
					url: `/indexPack/integral/comfirmIntegralOrder?number=${this.number}&goodsId=${this.jfcode}`
				})
			},
			async initData() {
				uni.showLoading({
					title: '加载中...'
				})
				this.swiperList = []
				try {
					const res = await this.$request({
						url: '/product-center/integralGood/goodDetails',
						data: {
							goodId: this.jfcode,
							id: this.jfcode,
						}
					})
					const datas = this.goodsInfo = res.datas
					if (datas.img) {
						let obj = {
							url: datas.img,
							type: 'image'
						}
						this.swiperList.push(obj)
					}
					if (datas.img1) {
						let obj = {
							url: datas.img1,
							type: 'image'
						}
						this.swiperList.push(obj)
					}
					if (datas.img2) {
						let obj = {
							url: datas.img2,
							type: 'image'
						}
						this.swiperList.push(obj)
					}
					if (datas.goodsBanner) {
						this.swiperList.push({
							url: datas.goodsBanner,
							type: 'video'
						})

					}
					if (this.goodsInfo.rem) {
						this.goodsInfo.rem = this.goodsInfo.rem.replace(/\<img/gi,
							'<img style="width:100%;height:auto" ')
					}
					uni.hideLoading()
				} catch (err) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}

				uni.stopPullDownRefresh();
			},
		},
		onLoad(option) {
			this.jfcode = option.jfcode
			this.getWifiStatus()
			this.initData()
		},
		// 分享到聊天
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					title: `${this.goodsInfo.redeemIntegral}积分|${this.goodsInfo.productName}`,
					desc: `阿特拉斯卡友之家`,
					path: `/indexPack/integral/integralGoodsDetail?jfcode=${this.jfcode}`,
					imageUrl: `${this.swiperList.length ? this.swiperList[0].url:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_nomal.png'}`
				}
			}
			return {
			}
		}
	}
</script>

<style lang="scss">
	.goods-detail-wrap {
		box-sizing: border-box;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.mr10 {
			margin-right: 20rpx;
		}

		.ml10 {
			margin-left: 10rpx;
		}

		.layout-scroll {
			box-sizing: border-box;
			flex: 1;
			height: calc(100vh - 100rpx - env(safe-area-inset-bottom));

			.swiper-box {
				height: 800rpx;
				position: relative;

				.indicator {
					position: absolute;
					right: 10rpx;
					bottom: 30rpx;

					.indicator-num {
						padding: 4rpx 0;
						background-color: rgba(0, 0, 0, 0.35);
						border-radius: 200rpx;
						width: 70rpx;
						text-align: center;
						color: #fff;
						font-size: 12px;
					}
				}

				.swiper {
					height: 100%;

					.swiper-item {
						width: 100%;
						height: 100%;
					}

					image {
						width: 100%;
						height: 100%;
					}

					video {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.goods-info {
			padding: 0;
			background: #fff;

			.goods-name {
				text-shadow: 0 0 0.1px currentcolor;
				margin-bottom: 20rpx;
				word-wrap: break-all;
				line-break: anywhere;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				text-shadow: 0 0 0.1px currentcolor;
				line-clamp: 2;
				padding: 20rpx;
				-webkit-box-orient: vertical;
				
			}

			// .price {
			// 	display: flex;
			// 	align-items: center;

			// 	.new-price {
			// 		color: #DE4442;
			// 		margin-right: 20rpx;
			// 		font-weight: bolder;

			// 		.icon {
			// 			font-size: 12px;
			// 		}
			// 	}

			// 	.old-price {
			// 		color: #8E8E8E;
			// 		text-decoration: line-through;
			// 		font-size: 12px;
			// 	}
			// }
			.price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: url('https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/price-bg.png');
				background-size: 100% 100%;
				height: 120rpx;
				padding: 0 20rpx;
				position: relative;
				margin-top: -20rpx;
			
				.price-info {
					display: flex;
					align-items: center;
				}
			
				.new-price {
					color: #fff;
					margin-right: 20rpx;
					font-weight: bolder;
			
					.icon {
						font-size: 12px;
					}
				}
			
				.old-price {
					color: #fff;
					text-decoration: line-through;
					font-size: 12px;
				}
			
				.share {
					display: flex;
					color: #fff;
					font-size: 14px;
					height: 100%;
					line-height: 120rpx;
			
					/deep/ .u-icon {
						margin-right: 10rpx;
					}
				}
			}
		}

		.goods-info-item {
			padding: 20rpx;
			background: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
			position: relative;
			font-size: 12px;

			.title {
				color: #8E8E8E;
				padding-right: 20rpx;
			}

			.right-icon {
				position: absolute;
				right: 20rpx;
				top: 30%
			}

			.item-content {
				flex: 1;
				position: relative;
				font-size: 12px;
				padding-right: 30rpx;

				.promotion-title {
					color: rgba(0, 0, 0, 0.45);
					padding-left: 10rpx;
				}

				.promotion {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					position: relative;
					margin-bottom: 16rpx;

					.promotion-name {
						color: #F67F77;
						background: #FAEEEF;
						padding: 4rpx;
						border-radius: 8rpx;
						border: 1px solid #F9B3B8;
						margin-right: 6rpx;
					}


					.right-icon {
						right: -2rpx;
						top: 20%
					}
				}

				.pay-count {
					width: 340rpx;
					float: right;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}

				.server-doc {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.icon {
						display: flex;
						justify-content: flex-start;
					}
				}
			}

			.parmas-box {
				width: 100%;
				margin-top: 20rpx;

				.table-cell {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 12px;

					.title {
						width: 200rpx;
						color: #8E8E8E;
						padding: 10rpx 16rpx;
						border: 1px solid #eee;
						border-bottom: none;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

					}

					.info {
						flex: 1;
						padding: 10rpx 16rpx;
						border: 1px solid #eee;
						border-left: none;
						border-bottom: none;
					}

					.end-border {
						border-bottom: 1px solid #eee;
					}
				}
			}

			.description {
				width: 100%;
				margin-top: 20rpx;
				overflow: hidden;
				overflow-y: auto;

				img {
					width: 100%;
				}
			}
		}

		.goods-number {
			display: block;

			.goods-number-item {
				padding-bottom: 10rpx;
			}

			.goods-label {
				color: #8E8E8E;
				padding-right: 20rpx;
			}

			.goods-title {
				color: rgba(0, 0, 0, 0.9);
			}
		}

		.goods-detail-nav {
			flex: 0;
			padding: 20rpx;
			background: #fff;
		}
	}
</style>